<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/detail.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>
<body>
<div id="app">
    <my-header></my-header>
    <section style="margin-top: 80px">
        <div class="container">
            <a href="#">
                <img :src="articleData.articlePic" width="100%" alt=""/>
            </a>
        </div>
    </section>
    <section class="mt-3">
        <div class="container">
            <div class="card" style="background-color: white;">
                <div class="card-body">
                    <div class="text-center">
                        <h2 class="my-4">{{ articleData.articleName }}</h2>
                        <p>
                            <i class="bi bi-folder2-open opacity-50"></i>
                            <span class="card-text articleMsg">{{ articleData.articleTypeName }}</span>
                            <i class="bi bi-tags opacity-50 ms-2"></i>
                            <span class="card-text articleMsg">{{ articleData.articleTag }}</span>
                            <i class="bi bi-alarm opacity-50  ms-2"></i>
                            <span class="card-text articleMsg">{{ articleData.createTime }}</span>
                            <a href="#" class="card-link articleMsg ms-2" @click="handleStar()">
                                <i class="bi bi-hand-thumbs-up-fill opacity-50">{{articleData.articleStarNum}}</i>
                            </a>
                            <i class="bi bi-book-half opacity-50 ms-2"></i>
                            <span class="card-text articleMsg">{{ articleData.articleReadCount }}</span>
                        </p>
                        <hr class="my-4"/>
                        <p class="text-start" v-html="articleData.articleContent">
                        </p>
                    </div>
                    <hr class="my-4"/>
                    <div>
                        <h3>相关文章</h3>
                        <ul class="list-group list-group-flush mb-3">
                            <li class="list-group-item" style="border: none;" v-for="d in relatedArticles">&bull;
                                <a :href="'blog-detail.html?'+d.id" class="text-info article">{{ d.articleName }} </a>
                            </li>

                        </ul>


                        <div style="background-color: #fafbfc;">
                            <div class="d-flex">
                                <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                                <input class="form-control h-75 mt-3" v-model="content" placeholder="请输入评论..."/>
                            </div>
                            <button type="button" class="btn btn-primary" @click="addComments" style="width: 100px;margin-left: 55px;">
                                发表评论
                            </button>
                        </div>

                        <hr/>

                        <div>
                            <div v-for="c in commtents">
                                <div class="delBtn">
                                    <i class="bi bi-trash3-fill" @click = "delcomment(c._id)"></i>
                                </div>
                                <div class="d-flex">
                                    <img src="../../assets/images/p28.jpg" alt="" width="40px"
                                         class="rounded-circle m-2"/>
                                    <div class="mt-1">
                          <span class="text-dark fw-bolder h6">游客:
                            <span>{{c.nickname}}</span>
                          </span>
                                        <br/>
                                        <span>{{c.createTime}}</span>
                                    </div>
                                </div>
                                <span style="margin-left: 55px;">{{ c.content}}</span>
                                <hr class="my-2"/>
                            </div>
                        </div>
                        <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                          d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                        <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                            <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                                但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                            </p>
                            <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            id: '',
            articleData: '',//获取一条文章信息
            relatedArticles: [],//获取相关文章内容
            nickname:'', //评论人昵称
            content:'', //需要发表的评论
            commtents:[], //获取当前文章的评论


        },
        methods: {
            //点击点赞实现逻辑
            handleStar(){
                this.$http.put("/article/updateStar/" + this.id).then(res=>{
                    if (res.data.success){
                        if (res.data.message == "cancel"){
                            //设置点赞图标的颜色 - 未点赞
                            this.starIcon = "bi bi-hand-thumbs-up opacity-50";
                        }else {
                            //设置点赞图标的颜色 - 已点赞
                            this.starIcon = "bi bi-hand-thumbs-up-fill opacity-50"
                        }
                        //调用查询文章详情方法
                        this.getArticleData()
                    }else {
                        this.$message.error("系统繁忙，请稍后重试【500】");
                    }
                }).catch(res=>{
                    this.$message.error("系统繁忙，请稍后重试【400,404】");
                })
            },
            //页面加载点赞图片样式
            getInitIconClass(){
                let url = location.href;
                let articleId = url.substring(url.lastIndexOf("?") + 1)//获取文章id
                this.$http.get("/article/initIconClass/" + articleId).then(res=>{
                    if (res.data.message == "ok"){ //已经点赞过的
                        this.starIcon = "bi bi-hand-thumbs-up-fill opacity-50";
                    }else{//这个电脑还没有点赞
                        this.starIcon = "bi bi-hand-thumbs-up opacity-50";
                    }
                }).catch(res=>{
                    this.$message.error("系统繁忙，请稍后重试【400，404】")
                })
            },
            //获取当前文章的评论
            getComment(){
               this.$http.get("/comment/" + this.id).then(res=>{
                   this.commtents = res.data

               })
            },
            //添加评论
            addComments(){
                let params = {
                    "articleId":this.id,
                    "nickname":this.nickname,
                    "content":this.content
                }
                this.$http.put("/comment",params).then(res=>{
                    if (res.data.success){
                        this.$message.success("评论发表成功")
                        this.getComment()
                        this.content = ""
                    }else {
                        this.$message.error("评论发表失败")
                    }
                }).cache(res=>{
                    this.$message.error("系统繁忙请稍后再试")
                })
            },
            //删除评论
            delcomment(_id){
               this.$http.delete("/comment/" + _id).then(res=>{
                   if (res.data.success){
                       this.$message.success("评论删除成功")
                       this.getComment()
                   }else {
                       this.$message.error("评论删除失败")
                   }
               }).cache(res=>{
                   this.$message.error("系统繁忙请稍后再试")
               })
            },

            //Uuid ->随机生产字符串
            createUuid() {
                var s = [];
                var hexDigits = "0123456789abcdefghi";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            },
            //获取一条文章信息
            getArticleData() {
                this.$http.get('/article/' + this.id).then(res => {
                    this.articleData = res.data;
                })
            },
            //获取相关文章内容 根据article_tag查找相同的数据
            getRelatedArticles() {
                this.$http.get('/article/relatedArticles/' + this.id).then(res => {
                    this.relatedArticles = res.data
                })
            }
        },
        components: {
            // 将组建加入组建库
            'my-header': httpVueLoader('./common/header.vue')
        },
        mounted() {
            this.id = location.href.substring(location.href.lastIndexOf('?') + 1);
            this.getArticleData()
            this.getRelatedArticles()  //获取相关文章内容
            this.nickname = this.createUuid() //页面加载赋值评论人的昵称
            this.getComment()
            this.getInitIconClass() //页面加载点赞图片样式
        }
    })
</script>

</body>

</html>